<template>
  <div class="box">
    <!-- <div class="item">
      <Icon type="ios-pricetags" />
      <p>待办消息</p>
    </div>-->
    <div @click="toToWork" class="item work">
      工作台
    </div>
    <div @click="toTodolist" class="item" style="margin-right:30px;position:relative">
      <Icon type="md-notifications" />
      <p>待办消息</p>
      <span class="dot" v-if="waitNumber>0">{{waitNumber}}</span>
    </div>
    <div class="user-avatar-dropdown">
      <Dropdown @on-click="handleClick">
        <Badge :dot="!!messageUnreadCount">
          <!-- <Avatar :src="userAvatar" /> -->
          <span >{{username}}</span>
        </Badge>
        <Icon :size="18" type="md-arrow-dropdown"></Icon>
        <DropdownMenu slot="list">
          <!-- <DropdownItem name="message">
            消息中心
            <Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
          </DropdownItem>-->
          <DropdownItem name="changePassword">修改密码</DropdownItem>
          <DropdownItem name="logout">退出登录</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>

    <ModalChangePassword v-model="changePasswordModalVisiable" />
  </div>
</template>

<script>
import './user.less';
import { mapActions, mapState } from 'vuex';
import ModalChangePassword from './model-change-password';
export default {
  name: 'User',
  components: {
    ModalChangePassword
  },
  data () {
    return {
      admin: 'admin',
      changePasswordModalVisiable: false
    };
  },
  props: {
    userAvatar: {
      type: String,
      default: ''
    },
    messageUnreadCount: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState({
      username: state => state.user.username,
      waitNumber: state => state.user.waitNumber
    })
  },

  methods: {
    ...mapActions(['handleLogOut']),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        });
      });
    },
    toTodolist () {
      this.$router.push({
        path: '/msg_program/msg_todo'
      });
    },
    toToWork () {
      window.open('https://datav.aliyuncs.com/share/1445308d9dbb0bd2f49e78462f9918fa');
    },
    message () {
      this.$router.push({
        name: 'message_page'
      });
    },
    openChangePasswordModal () {
      this.changePasswordModalVisiable = true;
    },
    handleClick (name) {
      switch (name) {
        case 'logout':
          this.logout();
          break;
        case 'changePassword':
          this.openChangePasswordModal();
          break;
        case 'message':
          this.message();
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .dot{
    width: 18px;
    height: 18px;
    background: red;
    /* color: red; */
    position: absolute;
    top: 30px;
    right: -20px;
    border-radius: 50%;
    font-size: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    zoom:0.8;
    color: #fff;
  }
  .work{
    // border:1px solid #2d8cf0;
    background:rgb(90, 111, 206);
    width:60px;
    height:34px;
    border-radius:16px;
    box-sizing:border-box;
    justify-content:center;
    margin-right:20px;
    color:#fff;
  }
</style>
